import React, { useState } from 'react';
import { 
  BarChart3, 
  TrendingUp, 
  FileText, 
  Settings, 
  Plus,
  Download,
  Eye,
  Edit,
  Trash2,
  Calendar,
  Building2,
  Factory,
  Car,
  Zap,
  Flame,
  Leaf,
  Calculator,
  Database,
  Target,
  AlertCircle,
  CheckCircle,
  Users,
  MapPin,
  Globe,
  Activity,
  Brain,
  Bot,
  RefreshCw,
  X
} from 'lucide-react';

const CarbonInventoryMain = () => {
  const [activeTab, setActiveTab] = useState('overview');
  const [selectedYear, setSelectedYear] = useState('2024');
  const [aiAssistantOpen, setAiAssistantOpen] = useState(false);

  // Mock数据 - 组织碳盘查数据
  const inventoryData = {
    overview: {
      totalEmissions: 12500,
      scope1Emissions: 3200,
      scope2Emissions: 6800,
      scope3Emissions: 2500,
      reductionTarget: 15,
      currentYear: 2024,
      baselineYear: 2020,
      aiAccuracy: 98.5,
      dataCompleteness: 94.2
    },
    organizationalBoundary: [
      { 
        facility: '总部大楼', 
        location: '北京市朝阳区', 
        scope: '运营控制', 
        status: 'active',
        emissions: 2800,
        employees: 450,
        area: '15,000㎡'
      },
      { 
        facility: '生产基地A', 
        location: '上海市浦东新区', 
        scope: '运营控制', 
        status: 'active',
        emissions: 4200,
        employees: 800,
        area: '25,000㎡'
      },
      { 
        facility: '生产基地B', 
        location: '深圳市南山区', 
        scope: '运营控制', 
        status: 'active',
        emissions: 3800,
        employees: 650,
        area: '20,000㎡'
      },
      { 
        facility: '物流中心', 
        location: '广州市白云区', 
        scope: '运营控制', 
        status: 'active',
        emissions: 1200,
        employees: 120,
        area: '8,000㎡'
      },
      { 
        facility: '研发中心', 
        location: '杭州市滨江区', 
        scope: '运营控制', 
        status: 'active',
        emissions: 500,
        employees: 200,
        area: '5,000㎡'
      }
    ],
    emissionSources: [
      { 
        source: '固定燃烧', 
        category: 'Scope 1', 
        emissions: 1800, 
        unit: 'tCO2e', 
        trend: 'up',
        facilities: ['生产基地A', '生产基地B'],
        aiRecommendation: '建议升级锅炉设备，可减少15%排放'
      },
      { 
        source: '移动燃烧', 
        category: 'Scope 1', 
        emissions: 1400, 
        unit: 'tCO2e', 
        trend: 'down',
        facilities: ['总部大楼', '物流中心'],
        aiRecommendation: '电动车替换计划效果显著，继续推进'
      },
      { 
        source: '逸散排放', 
        category: 'Scope 1', 
        emissions: 0, 
        unit: 'tCO2e', 
        trend: 'stable',
        facilities: ['生产基地A'],
        aiRecommendation: '逸散排放控制良好，保持现状'
      },
      { 
        source: '电力消耗', 
        category: 'Scope 2', 
        emissions: 4500, 
        unit: 'tCO2e', 
        trend: 'up',
        facilities: ['总部大楼', '生产基地A', '生产基地B', '研发中心'],
        aiRecommendation: '建议增加绿电采购比例至30%'
      },
      { 
        source: '热力消耗', 
        category: 'Scope 2', 
        emissions: 2300, 
        unit: 'tCO2e', 
        trend: 'down',
        facilities: ['生产基地A', '生产基地B'],
        aiRecommendation: '热力系统优化效果明显'
      },
      { 
        source: '商务差旅', 
        category: 'Scope 3', 
        emissions: 800, 
        unit: 'tCO2e', 
        trend: 'up',
        facilities: ['总部大楼', '研发中心'],
        aiRecommendation: '建议推广视频会议，减少差旅需求'
      },
      { 
        source: '员工通勤', 
        category: 'Scope 3', 
        emissions: 1200, 
        unit: 'tCO2e', 
        trend: 'down',
        facilities: ['总部大楼', '生产基地A', '生产基地B'],
        aiRecommendation: '班车服务使用率提升，继续优化路线'
      },
      { 
        source: '废弃物处理', 
        category: 'Scope 3', 
        emissions: 500, 
        unit: 'tCO2e', 
        trend: 'stable',
        facilities: ['生产基地A', '生产基地B', '物流中心'],
        aiRecommendation: '废弃物分类回收效果良好'
      }
    ],
    aiInsights: [
      {
        type: 'optimization',
        title: '减排机会识别',
        description: 'AI分析发现3个主要减排机会，预计可减少排放12%',
        priority: 'high',
        actions: ['升级锅炉设备', '增加绿电采购', '优化物流路线']
      },
      {
        type: 'anomaly',
        title: '数据异常检测',
        description: '检测到生产基地B的电力消耗异常增长，建议调查',
        priority: 'medium',
        actions: ['检查设备运行状态', '分析用电模式', '联系设备供应商']
      },
      {
        type: 'trend',
        title: '趋势预测',
        description: '基于历史数据预测，如不采取措施，2025年排放将增长8%',
        priority: 'high',
        actions: ['制定减排计划', '设定阶段性目标', '监控执行效果']
      }
    ],
    emissionFactors: [
      { fuel: '电力', factor: 0.5839, unit: 'kgCO2e/kWh', source: '国家发改委', year: 2024, region: '华东' },
      { fuel: '天然气', factor: 2.1622, unit: 'kgCO2e/m³', source: '国家发改委', year: 2024, region: '全国' },
      { fuel: '汽油', factor: 2.9251, unit: 'kgCO2e/L', source: '国家发改委', year: 2024, region: '全国' },
      { fuel: '柴油', factor: 3.0959, unit: 'kgCO2e/L', source: '国家发改委', year: 2024, region: '全国' },
      { fuel: '液化石油气', factor: 3.1013, unit: 'kgCO2e/kg', source: '国家发改委', year: 2024, region: '全国' }
    ],
    reports: [
      { id: 1, name: '2024年度组织碳盘查报告', type: '年度报告', status: '已完成', date: '2024-12-31', size: '3.2MB', aiGenerated: true },
      { id: 2, name: '2023年度组织碳盘查报告', type: '年度报告', status: '已完成', date: '2023-12-31', size: '2.8MB', aiGenerated: true },
      { id: 3, name: '2024年Q3组织碳盘查报告', type: '季度报告', status: '已完成', date: '2024-09-30', size: '2.1MB', aiGenerated: true },
      { id: 4, name: '2024年Q2组织碳盘查报告', type: '季度报告', status: '已完成', date: '2024-06-30', size: '2.0MB', aiGenerated: true },
      { id: 5, name: '2024年Q1组织碳盘查报告', type: '季度报告', status: '已完成', date: '2024-03-31', size: '1.9MB', aiGenerated: true }
    ]
  };

  const tabs = [
    { id: 'overview', name: '盘查概览', icon: BarChart3 },
    { id: 'boundary', name: '组织边界', icon: Building2 },
    { id: 'sources', name: '排放源', icon: Factory },
    { id: 'ai-insights', name: 'AI洞察', icon: Brain },
    { id: 'factors', name: '排放因子', icon: Settings },
    { id: 'reports', name: '盘查报告', icon: FileText }
  ];

  const getTrendIcon = (trend) => {
    switch (trend) {
      case 'up': return <TrendingUp className="w-4 h-4 text-red-500" />;
      case 'down': return <TrendingUp className="w-4 h-4 text-green-500 rotate-180" />;
      default: return <TrendingUp className="w-4 h-4 text-gray-400" />;
    }
  };

  const getScopeColor = (scope) => {
    switch (scope) {
      case 'Scope 1': return 'bg-red-100 text-red-800';
      case 'Scope 2': return 'bg-blue-100 text-blue-800';
      case 'Scope 3': return 'bg-green-100 text-green-800';
      default: return 'bg-gray-100 text-gray-800';
    }
  };

  const getPriorityColor = (priority) => {
    switch (priority) {
      case 'high': return 'bg-red-100 text-red-800 border-red-200';
      case 'medium': return 'bg-yellow-100 text-yellow-800 border-yellow-200';
      case 'low': return 'bg-green-100 text-green-800 border-green-200';
      default: return 'bg-gray-100 text-gray-800 border-gray-200';
    }
  };

  return (
    <div className="p-6 space-y-6">
      {/* 页面标题 */}
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-bold text-gray-900">组织碳盘查</h1>
          <p className="text-gray-600 mt-1">AI驱动的组织碳盘查系统，支持单一企业和集团公司</p>
        </div>
        <div className="flex space-x-3">
          <button 
            onClick={() => setAiAssistantOpen(true)}
            className="btn-primary flex items-center space-x-2 bg-gradient-to-r from-purple-600 to-blue-600"
          >
            <Bot className="w-4 h-4" />
            <span>AI助手</span>
          </button>
          <button className="btn-primary flex items-center space-x-2">
            <Plus className="w-4 h-4" />
            <span>新建盘查</span>
          </button>
          <button className="btn-secondary flex items-center space-x-2">
            <Download className="w-4 h-4" />
            <span>导出数据</span>
          </button>
        </div>
      </div>

      {/* AI助手弹窗 */}
      {aiAssistantOpen && (
        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
          <div className="bg-white rounded-lg p-6 w-full max-w-2xl mx-4">
            <div className="flex items-center justify-between mb-4">
              <h3 className="text-lg font-semibold flex items-center">
                <Bot className="w-5 h-5 mr-2 text-purple-600" />
                AI碳盘查助手
              </h3>
              <button onClick={() => setAiAssistantOpen(false)} className="text-gray-400 hover:text-gray-600">
                <X className="w-5 h-5" />
              </button>
            </div>
            <div className="space-y-4">
              <div className="bg-purple-50 p-4 rounded-lg">
                <p className="text-sm text-purple-800">
                  <strong>AI助手功能：</strong>
                </p>
                <ul className="text-sm text-purple-700 mt-2 space-y-1">
                  <li>• 智能识别排放源和计算边界</li>
                  <li>• 自动匹配排放因子和计算方法</li>
                  <li>• 数据质量检查和异常检测</li>
                  <li>• 减排机会识别和路径优化</li>
                  <li>• 自动生成符合标准的盘查报告</li>
                </ul>
              </div>
              <div className="flex space-x-3">
                <button className="flex-1 bg-purple-600 text-white py-2 px-4 rounded-md hover:bg-purple-700">
                  开始AI引导盘查
                </button>
                <button className="flex-1 bg-gray-200 text-gray-700 py-2 px-4 rounded-md hover:bg-gray-300">
                  查看AI分析报告
                </button>
              </div>
            </div>
          </div>
        </div>
      )}

      {/* 年份选择器 */}
      <div className="bg-white rounded-lg p-4 border">
        <div className="flex items-center space-x-4">
          <label className="text-sm font-medium text-gray-700">盘查年份:</label>
          <select 
            value={selectedYear} 
            onChange={(e) => setSelectedYear(e.target.value)}
            className="border border-gray-300 rounded-md px-3 py-2 text-sm"
          >
            <option value="2024">2024年</option>
            <option value="2023">2023年</option>
            <option value="2022">2022年</option>
            <option value="2021">2021年</option>
            <option value="2020">2020年</option>
          </select>
        </div>
      </div>

      {/* 标签页导航 */}
      <div className="bg-white rounded-lg border">
        <div className="border-b border-gray-200">
          <nav className="flex space-x-8 px-6">
            {tabs.map((tab) => {
              const Icon = tab.icon;
              return (
                <button
                  key={tab.id}
                  onClick={() => setActiveTab(tab.id)}
                  className={`
                    flex items-center py-4 px-1 border-b-2 font-medium text-sm
                    ${activeTab === tab.id
                      ? 'border-green-500 text-green-600'
                      : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
                    }
                  `}
                >
                  <Icon className="w-4 h-4 mr-2" />
                  {tab.name}
                </button>
              );
            })}
          </nav>
        </div>

        {/* 标签页内容 */}
        <div className="p-6">
          {activeTab === 'overview' && (
            <div className="space-y-6">
              {/* 关键指标卡片 */}
              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
                <div className="bg-gradient-to-r from-green-500 to-green-600 text-white rounded-lg p-6">
                  <div className="flex items-center justify-between">
                    <div>
                      <p className="text-sm opacity-90">总排放量</p>
                      <p className="text-2xl font-bold">{inventoryData.overview.totalEmissions.toLocaleString()}</p>
                      <p className="text-sm opacity-90">吨 CO2e</p>
                    </div>
                    <Leaf className="w-8 h-8 opacity-80" />
                  </div>
                </div>
                
                <div className="bg-gradient-to-r from-red-500 to-red-600 text-white rounded-lg p-6">
                  <div className="flex items-center justify-between">
                    <div>
                      <p className="text-sm opacity-90">Scope 1</p>
                      <p className="text-2xl font-bold">{inventoryData.overview.scope1Emissions.toLocaleString()}</p>
                      <p className="text-sm opacity-90">吨 CO2e</p>
                    </div>
                    <Flame className="w-8 h-8 opacity-80" />
                  </div>
                </div>
                
                <div className="bg-gradient-to-r from-blue-500 to-blue-600 text-white rounded-lg p-6">
                  <div className="flex items-center justify-between">
                    <div>
                      <p className="text-sm opacity-90">Scope 2</p>
                      <p className="text-2xl font-bold">{inventoryData.overview.scope2Emissions.toLocaleString()}</p>
                      <p className="text-sm opacity-90">吨 CO2e</p>
                    </div>
                    <Zap className="w-8 h-8 opacity-80" />
                  </div>
                </div>
                
                <div className="bg-gradient-to-r from-purple-500 to-purple-600 text-white rounded-lg p-6">
                  <div className="flex items-center justify-between">
                    <div>
                      <p className="text-sm opacity-90">Scope 3</p>
                      <p className="text-2xl font-bold">{inventoryData.overview.scope3Emissions.toLocaleString()}</p>
                      <p className="text-sm opacity-90">吨 CO2e</p>
                    </div>
                    <Car className="w-8 h-8 opacity-80" />
                  </div>
                </div>
              </div>

              {/* AI准确性和数据完整性 */}
              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div className="bg-white rounded-lg p-6 border">
                  <div className="flex items-center justify-between mb-4">
                    <h3 className="text-lg font-semibold flex items-center">
                      <Brain className="w-5 h-5 mr-2 text-purple-600" />
                      AI计算准确性
                    </h3>
                    <span className="text-2xl font-bold text-purple-600">{inventoryData.overview.aiAccuracy}%</span>
                  </div>
                  <div className="w-full bg-gray-200 rounded-full h-2">
                    <div 
                      className="bg-purple-600 h-2 rounded-full" 
                      style={{ width: `${inventoryData.overview.aiAccuracy}%` }}
                    ></div>
                  </div>
                  <p className="text-sm text-gray-600 mt-2">基于历史数据验证的AI计算准确率</p>
                </div>

                <div className="bg-white rounded-lg p-6 border">
                  <div className="flex items-center justify-between mb-4">
                    <h3 className="text-lg font-semibold flex items-center">
                      <Database className="w-5 h-5 mr-2 text-green-600" />
                      数据完整性
                    </h3>
                    <span className="text-2xl font-bold text-green-600">{inventoryData.overview.dataCompleteness}%</span>
                  </div>
                  <div className="w-full bg-gray-200 rounded-full h-2">
                    <div 
                      className="bg-green-600 h-2 rounded-full" 
                      style={{ width: `${inventoryData.overview.dataCompleteness}%` }}
                    ></div>
                  </div>
                  <p className="text-sm text-gray-600 mt-2">盘查数据完整性和覆盖率</p>
                </div>
              </div>

              {/* 减排目标进度 */}
              <div className="bg-white rounded-lg p-6 border">
                <div className="flex items-center justify-between mb-4">
                  <h3 className="text-lg font-semibold flex items-center">
                    <Target className="w-5 h-5 mr-2 text-blue-600" />
                    减排目标进度
                  </h3>
                  <span className="text-sm text-gray-600">
                    {inventoryData.overview.baselineYear}年基线 → {inventoryData.overview.currentYear}年目标
                  </span>
                </div>
                <div className="space-y-3">
                  <div className="flex items-center justify-between">
                    <span className="text-sm text-gray-600">目标减排率</span>
                    <span className="font-semibold">{inventoryData.overview.reductionTarget}%</span>
                  </div>
                  <div className="w-full bg-gray-200 rounded-full h-3">
                    <div 
                      className="bg-blue-600 h-3 rounded-full" 
                      style={{ width: `${(inventoryData.overview.reductionTarget / 20) * 100}%` }}
                    ></div>
                  </div>
                  <div className="flex justify-between text-sm text-gray-600">
                    <span>0%</span>
                    <span>20%</span>
                  </div>
                </div>
              </div>
            </div>
          )}

          {activeTab === 'boundary' && (
            <div className="space-y-6">
              <div className="flex items-center justify-between">
                <h3 className="text-lg font-semibold">组织边界管理</h3>
                <button className="btn-primary flex items-center space-x-2">
                  <Plus className="w-4 h-4" />
                  <span>添加设施</span>
                </button>
              </div>
              
              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                {inventoryData.organizationalBoundary.map((facility, index) => (
                  <div key={index} className="bg-white rounded-lg p-6 border hover:shadow-md transition-shadow">
                    <div className="flex items-center justify-between mb-4">
                      <h4 className="font-semibold text-gray-900">{facility.facility}</h4>
                      <span className={`px-2 py-1 text-xs rounded-full ${
                        facility.status === 'active' ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-800'
                      }`}>
                        {facility.status === 'active' ? '活跃' : '非活跃'}
                      </span>
                    </div>
                    
                    <div className="space-y-2 text-sm text-gray-600">
                      <div className="flex items-center">
                        <MapPin className="w-4 h-4 mr-2" />
                        {facility.location}
                      </div>
                      <div className="flex items-center">
                        <Building2 className="w-4 h-4 mr-2" />
                        {facility.scope}
                      </div>
                      <div className="flex items-center">
                        <Users className="w-4 h-4 mr-2" />
                        {facility.employees} 员工
                      </div>
                      <div className="flex items-center">
                        <Activity className="w-4 h-4 mr-2" />
                        {facility.emissions.toLocaleString()} tCO2e
                      </div>
                    </div>
                    
                    <div className="mt-4 flex space-x-2">
                      <button className="flex-1 bg-blue-100 text-blue-700 py-2 px-3 rounded-md text-sm hover:bg-blue-200">
                        编辑
                      </button>
                      <button className="flex-1 bg-green-100 text-green-700 py-2 px-3 rounded-md text-sm hover:bg-green-200">
                        查看详情
                      </button>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          )}

          {activeTab === 'sources' && (
            <div className="space-y-6">
              <div className="flex items-center justify-between">
                <h3 className="text-lg font-semibold">排放源管理</h3>
                <button className="btn-primary flex items-center space-x-2">
                  <Plus className="w-4 h-4" />
                  <span>添加排放源</span>
                </button>
              </div>
              
              <div className="space-y-4">
                {inventoryData.emissionSources.map((source, index) => (
                  <div key={index} className="bg-white rounded-lg p-6 border">
                    <div className="flex items-center justify-between mb-4">
                      <div className="flex items-center space-x-3">
                        <h4 className="font-semibold text-gray-900">{source.source}</h4>
                        <span className={`px-2 py-1 text-xs rounded-full ${getScopeColor(source.category)}`}>
                          {source.category}
                        </span>
                        {getTrendIcon(source.trend)}
                      </div>
                      <div className="text-right">
                        <p className="text-2xl font-bold text-gray-900">{source.emissions.toLocaleString()}</p>
                        <p className="text-sm text-gray-600">{source.unit}</p>
                      </div>
                    </div>
                    
                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                      <div>
                        <p className="text-sm font-medium text-gray-700 mb-2">涉及设施</p>
                        <div className="flex flex-wrap gap-1">
                          {source.facilities.map((facility, idx) => (
                            <span key={idx} className="px-2 py-1 bg-gray-100 text-gray-700 text-xs rounded">
                              {facility}
                            </span>
                          ))}
                        </div>
                      </div>
                      
                      <div>
                        <p className="text-sm font-medium text-gray-700 mb-2">AI建议</p>
                        <p className="text-sm text-gray-600 bg-blue-50 p-3 rounded">
                          {source.aiRecommendation}
                        </p>
                      </div>
                    </div>
                    
                    <div className="mt-4 flex space-x-2">
                      <button className="bg-blue-100 text-blue-700 py-2 px-3 rounded-md text-sm hover:bg-blue-200">
                        编辑
                      </button>
                      <button className="bg-green-100 text-green-700 py-2 px-3 rounded-md text-sm hover:bg-green-200">
                        查看详情
                      </button>
                      <button className="bg-purple-100 text-purple-700 py-2 px-3 rounded-md text-sm hover:bg-purple-200">
                        应用AI建议
                      </button>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          )}

          {activeTab === 'ai-insights' && (
            <div className="space-y-6">
              <div className="flex items-center justify-between">
                <h3 className="text-lg font-semibold flex items-center">
                  <Brain className="w-5 h-5 mr-2 text-purple-600" />
                  AI智能洞察
                </h3>
                <button className="btn-primary flex items-center space-x-2">
                  <RefreshCw className="w-4 h-4" />
                  <span>刷新分析</span>
                </button>
              </div>
              
              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                {inventoryData.aiInsights.map((insight, index) => (
                  <div key={index} className={`bg-white rounded-lg p-6 border-l-4 ${getPriorityColor(insight.priority)}`}>
                    <div className="flex items-center justify-between mb-3">
                      <h4 className="font-semibold text-gray-900">{insight.title}</h4>
                      <span className={`px-2 py-1 text-xs rounded-full ${getPriorityColor(insight.priority)}`}>
                        {insight.priority === 'high' ? '高优先级' : insight.priority === 'medium' ? '中优先级' : '低优先级'}
                      </span>
                    </div>
                    
                    <p className="text-sm text-gray-600 mb-4">{insight.description}</p>
                    
                    <div>
                      <p className="text-sm font-medium text-gray-700 mb-2">建议行动</p>
                      <ul className="space-y-1">
                        {insight.actions.map((action, idx) => (
                          <li key={idx} className="text-sm text-gray-600 flex items-center">
                            <CheckCircle className="w-3 h-3 mr-2 text-green-500" />
                            {action}
                          </li>
                        ))}
                      </ul>
                    </div>
                    
                    <div className="mt-4">
                      <button className="w-full bg-purple-600 text-white py-2 px-4 rounded-md hover:bg-purple-700 text-sm">
                        执行建议
                      </button>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          )}

          {activeTab === 'factors' && (
            <div className="space-y-6">
              <div className="flex items-center justify-between">
                <h3 className="text-lg font-semibold">排放因子库</h3>
                <button className="btn-primary flex items-center space-x-2">
                  <Plus className="w-4 h-4" />
                  <span>添加因子</span>
                </button>
              </div>
              
              <div className="overflow-x-auto">
                <table className="min-w-full bg-white border border-gray-200 rounded-lg">
                  <thead className="bg-gray-50">
                    <tr>
                      <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">燃料类型</th>
                      <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">排放因子</th>
                      <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">单位</th>
                      <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">数据来源</th>
                      <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">年份</th>
                      <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">适用区域</th>
                      <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
                    </tr>
                  </thead>
                  <tbody className="divide-y divide-gray-200">
                    {inventoryData.emissionFactors.map((factor, index) => (
                      <tr key={index} className="hover:bg-gray-50">
                        <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">{factor.fuel}</td>
                        <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{factor.factor}</td>
                        <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{factor.unit}</td>
                        <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{factor.source}</td>
                        <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{factor.year}</td>
                        <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{factor.region}</td>
                        <td className="px-6 py-4 whitespace-nowrap text-sm font-medium">
                          <button className="text-blue-600 hover:text-blue-900 mr-3">编辑</button>
                          <button className="text-red-600 hover:text-red-900">删除</button>
                        </td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            </div>
          )}

          {activeTab === 'reports' && (
            <div className="space-y-6">
              <div className="flex items-center justify-between">
                <h3 className="text-lg font-semibold">盘查报告</h3>
                <button className="btn-primary flex items-center space-x-2">
                  <Plus className="w-4 h-4" />
                  <span>生成新报告</span>
                </button>
              </div>
              
              <div className="space-y-4">
                {inventoryData.reports.map((report) => (
                  <div key={report.id} className="bg-white rounded-lg p-6 border hover:shadow-md transition-shadow">
                    <div className="flex items-center justify-between">
                      <div className="flex items-center space-x-4">
                        <div className="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center">
                          <FileText className="w-6 h-6 text-blue-600" />
                        </div>
                        <div>
                          <h4 className="font-semibold text-gray-900">{report.name}</h4>
                          <div className="flex items-center space-x-4 text-sm text-gray-600 mt-1">
                            <span>{report.type}</span>
                            <span>•</span>
                            <span>{report.date}</span>
                            <span>•</span>
                            <span>{report.size}</span>
                            {report.aiGenerated && (
                              <>
                                <span>•</span>
                                <span className="flex items-center text-purple-600">
                                  <Bot className="w-3 h-3 mr-1" />
                                  AI生成
                                </span>
                              </>
                            )}
                          </div>
                        </div>
                      </div>
                      
                      <div className="flex items-center space-x-2">
                        <span className={`px-2 py-1 text-xs rounded-full ${
                          report.status === '已完成' ? 'bg-green-100 text-green-800' : 'bg-yellow-100 text-yellow-800'
                        }`}>
                          {report.status}
                        </span>
                        <button className="text-blue-600 hover:text-blue-900">
                          <Eye className="w-4 h-4" />
                        </button>
                        <button className="text-green-600 hover:text-green-900">
                          <Download className="w-4 h-4" />
                        </button>
                        <button className="text-gray-600 hover:text-gray-900">
                          <Edit className="w-4 h-4" />
                        </button>
                      </div>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          )}
        </div>
      </div>
    </div>
  );
};

export default CarbonInventoryMain; 